<template>
  <div class="section-container-4">
    <div class="header">
      <bannerHeader
        @open="open"
        @select="select"
        title1="利润"
        title2="profit"
      />
    </div>
    <div class="show-body" ref="chart"></div>
  </div>
</template>

<script>
import bannerHeader from "../banner-header-right";
import request from "@/utils/request";
import Qs from "qs";
import { mapState } from "vuex";
import echarts from "echarts";
import UIfn from "./popup";
export default {
  components: {
    bannerHeader,
  },
  data() {
    return {
      type: "1",
      x: [],
      y: [],
    };
  },
  computed: {
    ...mapState("reportFormDark", ["deptId", "projectId"]),
  },
  watch: {
    deptId: {
      handler(val) {
        this.$nextTick(() => {
          this.select();
        });
      },
      immediate: true,
    },
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          this.select(); //
        });
      },
    },
  },
  created() {},
  mounted() {
    // setTimeout(() => {
    //   this.draw();
    // }, 500);
  },
  methods: {
    open() {
      UIfn(this);
    },
    select(type = this.type) {
      this.type = type;
      if (type === "1") {
        this.screenMonthProfit();
      } else {
        this.screenYearProfit();
      }
    },
    drawProfit(type, x, y) {
      this.x = x;
      this.y = y;
      setTimeout(() => {
        this.draw();
      }, 500);
    },
    screenMonthProfit(deptId = this.deptId) {
      request({
        url: "/system/screen/monthProfit",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.deptId,
          year: this.year,
          projectId: this.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y = [];
        for (const i in res.data) {
          x.push(`${i}月`);
          y.push((Number(res.data[i]) / 10000).toFixed(2) || 0);
        }
        this.drawProfit("1", x, y);
      });
    },
    screenYearProfit(deptId = this.deptId) {
      request({
        url: "/system/screen/yearProfit",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.deptId,
          year: this.year,
          projectId: this.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y = [];
        for (const i in res.data) {
          x.push(`${i}`);
          y.push((Number(res.data[i]) / 10000).toFixed(2) || 0);
        }
        this.drawProfit("2", x, y);
      });
    },
    draw() {
      const myChart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["开票", "收款"],
        //   x: "top",
        //   y: "left",
        //   padding: [10, 0, 0, 16],
        //   textStyle: {
        //     fontSize: 14,
        //     color: "rgba(0,0,0,.48)",
        //   },
        //   icon: "circle",
        //   itemWidth: 12,
        //   itemHeight: 12,
        //   itemGap: 12,
        // },
        grid: {
          top: "20",
          left: "0",
          right: "20",
          bottom: "0",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 51, 128, 1)",
          borderColor: "rgba(0, 79, 197, 1)",
          borderWidth: 2,
          padding: 10,
          textStyle: {
            color: "#8FC7FF",
          },
          formatter: function (params) {
            let time = `${new Date().getFullYear()}年${params[0].axisValue}`;
            if (params[0].axisValue.length > 3) {
              time = `${params[0].axisValue}年`;
            }
            const tip1 = `${params[0].marker}利润:${params[0].value}万元`;
            return `${time}</br>${tip1}`;
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.x,
          axisTick: {
            show: false,
          },

          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(143, 199, 255, .16)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
          //   show:false,
        },
        series: [
          {
            name: "利润",
            data: this.y,
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 155, 55, 1)",
                },
                {
                  offset: 0.5,
                  color: "rgba(255, 155, 55, .6)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 0, 0, 1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
          },
        ],
      };
      myChart.setOption(option);
      const resize = window.addEventListener("resize", () => {
        this.$nextTick(() => {
          setTimeout(() => {
            myChart.resize();
          }, 500);
        });
      });
      this.$once("hook:beforeDestroy", () => {
        window.removeEventListener("resize", resize);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.section-container-4 {
  width: 100%;
  height: 100%;

  .header {
    width: 100%;
    height: vh(42);
  }

  .show-body {
    width: 100%;
    height: calc(100% - #{vh(42)});
  }
}
</style>